<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper-3.2.7.min.css">
	<link rel="stylesheet" type="text/css" href="css/hd.css"/>
	<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
  
</head>
<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide one">
				<div class="top ani" swiper-animate-effect="zoomIn" swiper-animate-duration='1.5s' swiper-animate-delay="0.3s" >
					<img src="images/one.jpg" alt="" />
				</div>
				<!--戒指区域-->
				<div class="bottom">
					<img src="images/jiezhi.png" alt="" class="ring ani"  swiper-animate-effect="fadeInDown" swiper-animate-duration='1s' swiper-animate-delay="2.6s" />
					<img src="images/womenjiehunla.png" class="marry ani" swiper-animate-effect="fadeInUp" swiper-animate-duration='1s' swiper-animate-delay="1.8s"  />
					<img src="images/2016117.png" class="time ani" swiper-animate-effect="fadeIn" swiper-animate-duration='1.5s' swiper-animate-delay="3.6s"/>
					
				</div>
				<!--戒指区域结束-->
            </div>
            <div class="swiper-slide two">
				<div class="left ani" swiper-animate-effect="zoomIn" swiper-animate-duration='1s' swiper-animate-delay="0s">
					<img src="images/two1.jpg" />
				</div>
				<div class="right ani" swiper-animate-effect="zoomIn" swiper-animate-duration='1.5s' swiper-animate-delay="1s">
					<div class="top">
						<img src="images/two2.jpg"/>
					</div>
					<img src="images/twoline.png" swiper-animate-effect="fadeIn" swiper-animate-duration='0.5s' swiper-animate-delay="2.5s" class="ani"/>
					<img src="images/t1.png" swiper-animate-effect="fadeIn" swiper-animate-duration='1s' swiper-animate-delay="3s" class="ani"/>
					<img src="images/twoline.png" swiper-animate-effect="fadeIn" swiper-animate-duration='0.5s' swiper-animate-delay="4s" class="ani"/>
					<img src="images/t2.png" swiper-animate-effect="fadeIn" swiper-animate-duration='0.5s' swiper-animate-delay="4.5s" class="ani"/>
					<img src="images/twoline.png" swiper-animate-effect="fadeIn" swiper-animate-duration='1s' swiper-animate-delay="5s" class="ani"/>
					<img src="images/t3.png" swiper-animate-effect="fadeIn" swiper-animate-duration='1s' swiper-animate-delay="6s" class="ani"/>
					<img src="images/twoline.png" swiper-animate-effect="fadeIn" swiper-animate-duration='0.5s' swiper-animate-delay="7s" class="ani"/>
					<img src="images/t4.png" swiper-animate-effect="fadeIn" swiper-animate-duration='1s' swiper-animate-delay="7.5s" class="ani"/>
					<img src="images/twoline.png" swiper-animate-effect="fadeIn" swiper-animate-duration='0.5s' swiper-animate-delay="8.5s" class="ani"/>
					<img src="images/t5.png" swiper-animate-effect="fadeIn" swiper-animate-duration='1s' swiper-animate-delay="9s" class="ani"/>
				</div>
				<img src="images/fengche.gif" class="windmill ani"  swiper-animate-effect="fadeIn" swiper-animate-duration='1.5s' swiper-animate-delay="6s"/>
            </div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

	<!--音乐区域-->
	<div id="music">
		<img src="images/music.gif" alt="" class="music_bg" />
		<img src="images/music_off.png" alt="" class="music_pic" />
		<audio src="images/bgmusic.mp3" preload="auto" loop="loop" class="aud"></audio>
	</div>
	<!--音乐区域结束-->
	
	<!--声明-->
	<p class="copy">本效果仅用于后盾网公开课案例讲解，无商业用途</p>
	<!--声明结束-->

    <!-- Swiper JS -->
    <script src="js/swiper-3.2.7.min.js"></script>
    <script src="js/swiper.animate1.0.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/hd.js" type="text/javascript" charset="utf-8"></script>

</body>
</html>





















